<script setup>
import { reactive, toRefs, ref, onMounted, nextTick } from 'vue';
import { ElDialog, ElEmpty, ElForm, ElFormItem, ElMessage, ElTree } from 'element-plus';
import { useSystemStore } from '@/stores';

const props = defineProps({
  layerData: {
    type: Object,
  },

  layerShow: {
    type: Boolean,
  },
});
const { layerShow, layerData } = toRefs(props);
const emit = defineEmits(['handleLayerShowEmit', 'handleLayerParamEmit']);
const systemStore = useSystemStore();

const defaultProps = {
  children: '',
  label: 'title',
};

const treeRef = ref(null);
const formRef = ref(null);
const dataTree = ref([]);
const defaultChecked = ref([]);

const formInline = reactive({
  permissionIds: [],
});

const closeBoxShowDialog = () => {
  if (!formRef.value) return;
  formRef.value.resetFields();
  emit('handleLayerShowEmit', false);
};

onMounted(() => {
  dataTree.value = systemStore.systemMenu;

  if (Object.keys(layerData.value).length) {
    defaultChecked.value = layerData.value.menuCodes;
  }
});

const handleCheckChange = (nodeObj, SelectedObj) => {
  const parentChildNodes =
    treeRef.value.getNode(nodeObj).parent.data.children ?? treeRef.value.getNode(nodeObj).parent.data[0].children; // 获取选择的数据

  SelectedObj.checkedKeys.push(-1);
  SelectedObj.checkedKeys.sort((old, New) => {
    return old - New;
  });

  SelectedObj.checkedKeys.forEach((value) => {
    parentChildNodes.forEach((ele) => {
      if (value == ele.value) {
        let index = SelectedObj.checkedKeys.indexOf(value);

        SelectedObj.checkedKeys.splice(index, 1);
      }

      SelectedObj.checkedKeys.push(nodeObj.value);
      SelectedObj.checkedKeys = [...new Set(SelectedObj.checkedKeys)]; // 去重
      SelectedObj.checkedKeys.sort((old, New) => {
        return old - New;
      });
    });
  });

  nextTick(() => {
    treeRef.value.setChecked(SelectedObj.checkedKeys, true); // 选中树
  });

  formInline.permissionIds = SelectedObj.checkedNodes.map((item) => {
    return item.code;
  });
};

const handleSubmit = () => {
  formRef.value.validate((err) => {
    if (err) {
      if (formInline.permissionIds.length == 0) {
        ElMessage.warning('请选择菜单');

        return;
      }

      emit('handleLayerParamEmit', formInline);
    }
  });
};
</script>
<template>
  <div class="layer-loading">
    <ElDialog
      v-if="layerShow"
      v-model="layerShow"
      align-center="center"
      :append-to-body="false"
      title="数据分配"
      :close-on-click-modal="false"
      destroy-on-close
      draggable
      @close="closeBoxShowDialog()"
    >
      <main class="mt-20px">
        <ElForm ref="formRef" :model="formInline" label-position="top">
          <ElFormItem label="菜单名称">
            <div class="border-box p-10px">
              <ElTree
                v-if="dataTree?.length"
                ref="treeRef"
                style="max-width: 600px"
                :data="dataTree"
                show-checkbox
                node-key="code"
                :default-checked-keys="defaultChecked"
                :props="defaultProps"
                :check-strictly="true"
                @check="handleCheckChange"
              />
              <ElEmpty v-if="!dataTree?.length" description="暂无数据" />
            </div>
          </ElFormItem>
        </ElForm>
      </main>
      <div class="dialog-footer">
        <div @click="closeBoxShowDialog()">取消</div>
        <div @click="handleSubmit()">保存</div>
      </div>
    </ElDialog>
  </div>
</template>

<style scoped lang="scss">
.layer-loading {
  :deep(.el-dialog) {
    width: 700px;
    border-radius: 6px;
  }

  main {
    .border-box {
      width: 100%;
      min-height: 300px;
      max-height: 300px;
      overflow: auto;
      border: 1px solid $border-color;
      border-radius: 6px;
      &::-webkit-scrollbar {
        display: none;
        width: 0 !important;
      }
    }
  }

  .dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 30px;
    text-align: right;
    div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 40px;
      font-size: 16px;
      border-radius: 4px;
      cursor: pointer;

      &:first-child {
        color: $base-color-info;
        background-color: $base-button-background-info;
      }

      &:nth-child(2) {
        margin: 0 20px;
        color: $base-button-color-green;
        background-color: $base-button-background-green;
      }
    }
  }
}
</style>
